<!DOCTYPE html>













<html class="theme-next gemini" lang="zh-CN">
<head><meta name="generator" content="Hexo 3.8.0">
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#f06632">
























<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2">

<link rel="stylesheet" href="/css/main.css?v=7.1.0">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-HandyOrg.png?v=7.1.0">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-HandyOrg.png?v=7.1.0">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-HandyOrg.png?v=7.1.0">


  <link rel="mask-icon" href="/images/logo.svg?v=7.1.0" color="#f06632">







<script id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Gemini',
    version: '7.1.0',
    sidebar: {"position":"left","display":"post","offset":12,"onmobile":false,"dimmer":false},
    back2top: true,
    back2top_sidebar: true,
    fancybox: false,
    fastclick: false,
    lazyload: false,
    tabs: true,
    motion: {"enable":false,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>


  




  <meta name="description" content="栅格系统的wpf实现，web版本可参考 element/layout 1public class Row : Panel 1public class Col : ContentControl 属性Row 行   属性 描述 默认值 备注     Gutter 栅格间隔 0     Col 列   属性 描述 默认值 备注     Layout 布局方式     Offset 栅格左侧的间隔格数 0">
<meta property="og:type" content="website">
<meta property="og:title" content="Grid 栅格">
<meta property="og:url" content="http://yoursite.com/handycontrol/extend_controls/grid/index.html">
<meta property="og:site_name" content="HandyOrg">
<meta property="og:description" content="栅格系统的wpf实现，web版本可参考 element/layout 1public class Row : Panel 1public class Col : ContentControl 属性Row 行   属性 描述 默认值 备注     Gutter 栅格间隔 0     Col 列   属性 描述 默认值 备注     Layout 布局方式     Offset 栅格左侧的间隔格数 0">
<meta property="og:locale" content="zh-CN">
<meta property="og:image" content="https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/Grid.gif">
<meta property="og:updated_time" content="2020-08-09T06:20:44.204Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Grid 栅格">
<meta name="twitter:description" content="栅格系统的wpf实现，web版本可参考 element/layout 1public class Row : Panel 1public class Col : ContentControl 属性Row 行   属性 描述 默认值 备注     Gutter 栅格间隔 0     Col 列   属性 描述 默认值 备注     Layout 布局方式     Offset 栅格左侧的间隔格数 0">
<meta name="twitter:image" content="https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/Grid.gif">





  
  
  <link rel="canonical" href="http://yoursite.com/handycontrol/extend_controls/grid/">



<script id="page.configurations">
  CONFIG.page = {
    sidebar: "",
  };
</script>

  <title>Grid 栅格 | HandyOrg</title>
  












  <noscript>
  <style>
  .use-motion .motion-element,
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-title { opacity: initial; }

  .use-motion .logo,
  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-CN">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta">
    

    <div class="custom-logo-site-title">
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">HandyOrg</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
    
      
        <p class="site-subtitle">everything can be handy</p>
      
    
    
  </div>

  <div class="site-nav-toggle">
    <button aria-label="切换导航栏">
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>



<nav class="site-nav">
  
    <ul id="menu" class="menu">
      
        
        
        
          
          <li class="menu-item menu-item-主页">

    
    
    

    
      
    

    <a href="/" rel="section">主页</a>

  </li>
        
        
        
          
            
            
            
              
              

  
  
    
  
  <li class="menu-item menu-item-handycontrol---3.0.0 menu-item-active">

    
    
    

    
      
    

    <a href="/handycontrol/" rel="section">HandyControl - 3.0.0</a>

  </li>


            
          
            
            
            
          
            
            
            
          
            
            
            
          
            
            
            
          
            
            
            
          
            
            
            
          
            
            
            
          
            
            
            
          
            
            
            
          
        

      
      
        <li class="menu-item menu-item-search">
          
            <a href="javascript:;" class="popup-trigger">
          
            搜索</a>
        </li>
      
    </ul>
  

  

  
    <div class="site-search">
      
  <div class="popup search-popup local-search-popup">
  <div class="local-search-header clearfix">
    <span class="search-icon">
      <i class="fa fa-search"></i>
    </span>
    <span class="popup-btn-close">
      <i class="fa fa-times-circle"></i>
    </span>
    <div class="local-search-input-wrapper">
      <input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
    </div>
  </div>
  <div id="local-search-result"></div>
</div>



    </div>
  
</nav>



  



</div>
    </header>

    
  
  

  

  <a href="https://github.com/HandyOrg" class="github-corner" title="Follow us on GitHub" aria-label="Follow us on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewbox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"/><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"/><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"/></svg></a>



    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          
            

    
    
      
      
    
      
      

        
        
        

          
          <ul id="sub-menu" class="sub-menu menu">
          
            
            
              
              
                
              
            
          
            
            
              
              
                
                  
                
                

  
  
    
  
  <li class="menu-item menu-item-鸣谢">

    
    
    

    
      
    

    <a href="/handycontrol/tnx/" rel="section">鸣谢</a>

  </li>


              
            
          
            
            
              
              
                
                  
                
                

  
  
    
  
  <li class="menu-item menu-item-快速开始">

    
    
    

    
      
    

    <a href="/handycontrol/quick_start/" rel="section">快速开始</a>

  </li>


              
            
          
            
            
              
              
              
                
                  
                  

  
  
    
  
  <li class="menu-item menu-item-基础xaml定义">

    
    
    

    
      
    

    <a href="/handycontrol/basic_xaml/" rel="section">基础xaml定义</a>

  </li>


                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
            
          
            
            
              
              
              
                
                  
                  

  
  
    
  
  <li class="menu-item menu-item-附加属性">

    
    
    

    
      
    

    <a href="/handycontrol/attach/" rel="section">附加属性</a>

  </li>


                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
            
          
            
            
              
              
              
                
                  
                  

  
  
    
  
  <li class="menu-item menu-item-原生控件">

    
    
    

    
      
    

    <a href="/handycontrol/native_controls/" rel="section">原生控件</a>

  </li>


                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
            
          
            
            
              
              
              
                
                  
                  

  
  
    
  
  <li class="menu-item menu-item-扩展控件 menu-item-active">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/" rel="section">扩展控件</a>

  </li>


                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
            
          
            
            
              
              
              
                
                  
                  

  
  
    
  
  <li class="menu-item menu-item-数据">

    
    
    

    
      
    

    <a href="/handycontrol/data/" rel="section">数据</a>

  </li>


                
              
                
              
                
              
            
          
            
            
              
              
              
                
                  
                  

  
  
    
  
  <li class="menu-item menu-item-工具和扩展">

    
    
    

    
      
    

    <a href="/handycontrol/tools/" rel="section">工具和扩展</a>

  </li>


                
              
                
              
                
              
                
              
            
          
            
            
              
              
              
                
                  
                  

  
  
    
  
  <li class="menu-item menu-item-国际化">

    
    
    

    
      
    

    <a href="/handycontrol/langs/" rel="section">国际化</a>

  </li>


                
              
            
          
          </ul>
          

          
          
            
            
          
            
            

              
                
                
                  
                
                
              
                
                
                
              
                
                
                
              
                
                
                

                  
                  
                  
                    
                  
                  

                
              
                
                
                

                  
                  
                  
                    
                  
                  

                
              
                
                
                

                  
                  
                  
                    
                  
                  

                
              
                
                
                

                  
                  
                  
                    

                      
                      <ul id="sub-menu-2" class="sub-menu menu">
                      
                        
                        
                        
                          
                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-animationpath-动画路径">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/animationPath/" rel="section">AnimationPath 动画路径</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-badge-标记">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/badge/" rel="section">Badge 标记</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-blurwindow-背景模糊窗口">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/blurWindow/" rel="section">BlurWindow 背景模糊窗口</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-buttongroup-按钮组">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/buttonGroup/" rel="section">ButtonGroup 按钮组</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-calendarwithclock-带有时钟的日历">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/calendarWithClock/" rel="section">CalendarWithClock 带有时钟的日历</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-card-卡片">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/card/" rel="section">Card 卡片</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-carousel-轮播">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/carousel/" rel="section">Carousel 轮播</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-chatbubble-对话气泡">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/chatBubble/" rel="section">ChatBubble 对话气泡</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-checkcombobox-复选组合框">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/checkComboBox/" rel="section">CheckComboBox 复选组合框</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-circlepanel-圆形布局">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/circlePanel/" rel="section">CirclePanel 圆形布局</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-circleprogressbar-圆形进度条">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/circleProgressBar/" rel="section">CircleProgressBar 圆形进度条</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-clock-时钟">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/clock/" rel="section">Clock 时钟</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-colorpicker-颜色拾取器">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/colorPicker/" rel="section">ColorPicker 颜色拾取器</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-combobox-组合框">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/comboBox/" rel="section">ComboBox 组合框</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-compareslider-对比滑块">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/compareSlider/" rel="section">CompareSlider 对比滑块</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-contextmenubutton-上下文菜单按钮">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/contextMenuButton/" rel="section">ContextMenuButton 上下文菜单按钮</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-coverflow-封面流">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/coverFlow/" rel="section">CoverFlow 封面流</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-coverview-封面视图">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/coverView/" rel="section">CoverView 封面视图</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-dashedborder-虚线边框">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/dashedBorder/" rel="section">DashedBorder 虚线边框</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-datepicker-日期选择器">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/datePicker/" rel="section">DatePicker 日期选择器</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-datetimepicker-日期时间选择器">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/dateTimePicker/" rel="section">DateTimePicker 日期时间选择器</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-dialog-对话框">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/dialog/" rel="section">Dialog 对话框</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-divider-分割线">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/divider/" rel="section">Divider 分割线</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-drawer-抽屉">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/drawer/" rel="section">Drawer 抽屉</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-flipclock-翻页时钟">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/flipClock/" rel="section">FlipClock 翻页时钟</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-floatingblock-漂浮块">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/floatingBlock/" rel="section">FloatingBlock 漂浮块</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-gifimage-gif图片">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/gifImage/" rel="section">GifImage Gif图片</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-glowwindow-辉光窗口">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/glowWindow/" rel="section">GlowWindow 辉光窗口</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-gototop-回到顶部">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/gotoTop/" rel="section">GotoTop 回到顶部</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-gravatar-头像">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/gravatar/" rel="section">Gravatar 头像</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-grid-栅格 menu-item-active">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/grid/" rel="section">Grid 栅格</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-growl-信息通知">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/growl/" rel="section">Growl 信息通知</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-honeycombpanel-蜂窝布局">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/honeycombPanel/" rel="section">HoneycombPanel 蜂窝布局</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-imageblock-图片块">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/imageBlock/" rel="section">ImageBlock 图片块</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-imagebrowser-图片浏览器">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/imageBrowser/" rel="section">ImageBrowser 图片浏览器</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-imageselector-图片选择器">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/imageSelector/" rel="section">ImageSelector 图片选择器</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-imageviewer-图片视图">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/imageViewer/" rel="section">ImageViewer 图片视图</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-loading-加载条">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/loading/" rel="section">Loading 加载条</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-magnifier-放大镜">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/magnifier/" rel="section">Magnifier 放大镜</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-messagebox-消息对话框">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/messageBox/" rel="section">MessageBox 消息对话框</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-notification-桌面通知">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/notification/" rel="section">Notification 桌面通知</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-notifyicon-托盘图标">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/notifyIcon/" rel="section">NotifyIcon 托盘图标</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-numericupdown-数值选择控件">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/numericUpDown/" rel="section">NumericUpDown 数值选择控件</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-outlinetext-轮廓文本">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/outlineText/" rel="section">OutlineText 轮廓文本</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-pagination-页码条">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/pagination/" rel="section">Pagination 页码条</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-passwordbox-密码框">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/passwordBox/" rel="section">PasswordBox 密码框</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-pinbox-pin码框">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/pinBox/" rel="section">PinBox PIN码框</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-poptip-气泡提示">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/popTip/" rel="section">PopTip 气泡提示</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-popupwindow-弹出窗口">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/popupWindow/" rel="section">PopupWindow 弹出窗口</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-previewslider-预览滑块">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/previewSlider/" rel="section">PreviewSlider 预览滑块</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-progressbutton-进度按钮">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/progressButton/" rel="section">ProgressButton 进度按钮</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-propertygrid-属性编辑器">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/propertyGrid/" rel="section">PropertyGrid 属性编辑器</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-rangeslider-范围滑块">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/rangeSlider/" rel="section">RangeSlider 范围滑块</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-rate-评分">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/rate/" rel="section">Rate 评分</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-relativepanel-相对布局">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/relativePanel/" rel="section">RelativePanel 相对布局</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-runningblock-滚动块">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/runningBlock/" rel="section">RunningBlock 滚动块</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-screenshot-截图">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/screenshot/" rel="section">Screenshot 截图</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-scrollviewer-滚动视图">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/scrollViewer/" rel="section">ScrollViewer 滚动视图</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-searchbar-搜索栏">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/searchBar/" rel="section">SearchBar 搜索栏</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-shield-徽章">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/shield/" rel="section">Shield 徽章</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-sidemenu-侧边菜单">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/sideMenu/" rel="section">SideMenu 侧边菜单</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-simpleitemscontrol-简单项目控件">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/simpleItemsControl/" rel="section">SimpleItemsControl 简单项目控件</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-simplepanel-简单面板">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/simplePanel/" rel="section">SimplePanel 简单面板</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-simpletext-简单文本">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/simpleText/" rel="section">SimpleText 简单文本</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-splitbutton-分割按钮">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/splitButton/" rel="section">SplitButton 分割按钮</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-sprite-精灵">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/sprite/" rel="section">Sprite 精灵</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-stepbar-步骤条">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/stepBar/" rel="section">StepBar 步骤条</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-tabcontrol-选项卡控件">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/tabControl/" rel="section">TabControl 选项卡控件</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-tag-标签">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/tag/" rel="section">Tag 标签</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-textbox-文本框">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/textBox/" rel="section">TextBox 文本框</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-timebar-时间条">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/timeBar/" rel="section">TimeBar 时间条</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-timepicker-时间选择器">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/timePicker/" rel="section">TimePicker 时间选择器</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-toggleblock-切换块">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/toggleBlock/" rel="section">ToggleBlock 切换块</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-transfer-穿梭框">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/transfer/" rel="section">Transfer 穿梭框</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-transitioningcontentcontrol-内容过渡控件">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/transitioningContentControl/" rel="section">TransitioningContentControl 内容过渡控件</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-waterfallpanel-瀑布流">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/waterfallPanel/" rel="section">WaterfallPanel 瀑布流</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-watermark-水印">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/watermark/" rel="section">Watermark 水印</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-waveprogressbar-波形进度条">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/waveProgressBar/" rel="section">WaveProgressBar 波形进度条</a>

  </li>


                        
                      
                        
                        
                        
                          
                            
                          
                          

  
  
    
  
  <li class="menu-item menu-item-window-窗口">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/window/" rel="section">Window 窗口</a>

  </li>


                        
                      
                      </ul>
                      

                    
                  
                  

                
              
                
                
                

                  
                  
                  
                    
                  
                  

                
              
                
                
                

                  
                  
                  
                    
                  
                  

                
              
                
                
                

                  
                  
                  
                    
                  
                  

                
              

            
          
          

        
        

      
    
    

  


          
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    
    
    
    <div class="post-block page">
      <header class="post-header">

<h1 class="post-title" itemprop="name headline">Grid 栅格

</h1>

<div class="post-meta">
  
  


  
  
  <ul class="breadcrumb">
    
      
      
        
          
            
          
          
            <li><a href="/handycontrol/">HANDYCONTROL</a></li>
          
        
      
    
      
      
        
          
            
          
          
            <li><a href="/handycontrol/extend_controls/">EXTEND_CONTROLS</a></li>
          
        
      
    
      
      
        
          <li>GRID</li>
        
      
    
      
      
    
  </ul>


</div>

</header>

      
      
      
      <div class="post-body">
        
        
          <p>栅格系统的wpf实现，web版本可参考 <a href="https://element.eleme.cn/#/zh-CN/component/layout" target="_blank" rel="noopener">element/layout</a></p>
<figure class="highlight cs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">public</span> <span class="keyword">class</span> <span class="title">Row</span> : <span class="title">Panel</span></span><br></pre></td></tr></table></figure>
<figure class="highlight cs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">public</span> <span class="keyword">class</span> <span class="title">Col</span> : <span class="title">ContentControl</span></span><br></pre></td></tr></table></figure>
<h1 id="属性"><a href="#属性" class="headerlink" title="属性"></a>属性</h1><h2 id="Row-行"><a href="#Row-行" class="headerlink" title="Row 行"></a>Row 行</h2><table>
<thead>
<tr>
<th>属性</th>
<th>描述</th>
<th>默认值</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>Gutter</td>
<td>栅格间隔</td>
<td>0</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Col-列"><a href="#Col-列" class="headerlink" title="Col 列"></a>Col 列</h2><table>
<thead>
<tr>
<th>属性</th>
<th>描述</th>
<th>默认值</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>Layout</td>
<td>布局方式</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Offset</td>
<td>栅格左侧的间隔格数</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>Span</td>
<td>栅格占据的列数</td>
<td>24</td>
<td></td>
</tr>
<tr>
<td>IsFixed</td>
<td>该列是否固定</td>
<td>false</td>
<td></td>
</tr>
</tbody>
</table>
<h1 id="案例"><a href="#案例" class="headerlink" title="案例"></a>案例</h1><figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">StackPanel</span> <span class="attr">Margin</span>=<span class="string">"32"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">TextBlock</span> <span class="attr">Text</span>=<span class="string">"&#123;ex:Lang Key=&#123;x:Static langs:LangKeys.BasicLayout&#125;&#125;"</span> <span class="attr">Style</span>=<span class="string">"&#123;StaticResource TextBlockLargeBold&#125;"</span> <span class="attr">HorizontalAlignment</span>=<span class="string">"Left"</span>/&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">hc:Row</span> <span class="attr">Margin</span>=<span class="string">"0,20,0,0"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">hc:Col</span> <span class="attr">Span</span>=<span class="string">"24"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">Border</span> <span class="attr">Background</span>=<span class="string">"&#123;DynamicResource SecondaryBorderBrush&#125;"</span> <span class="attr">Height</span>=<span class="string">"36"</span> <span class="attr">CornerRadius</span>=<span class="string">"4"</span>/&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">hc:Col</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">hc:Row</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">hc:Row</span> <span class="attr">Margin</span>=<span class="string">"0,20,0,0"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">hc:Col</span> <span class="attr">Span</span>=<span class="string">"12"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">Border</span> <span class="attr">Background</span>=<span class="string">"&#123;DynamicResource BorderBrush&#125;"</span> <span class="attr">Height</span>=<span class="string">"36"</span> <span class="attr">CornerRadius</span>=<span class="string">"4"</span>/&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">hc:Col</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">hc:Col</span> <span class="attr">Span</span>=<span class="string">"12"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">Border</span> <span class="attr">Background</span>=<span class="string">"&#123;DynamicResource SecondaryBorderBrush&#125;"</span> <span class="attr">Height</span>=<span class="string">"36"</span> <span class="attr">CornerRadius</span>=<span class="string">"4"</span>/&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">hc:Col</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">hc:Row</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">hc:Row</span> <span class="attr">Margin</span>=<span class="string">"0,20,0,0"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">hc:Col</span> <span class="attr">Span</span>=<span class="string">"8"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">Border</span> <span class="attr">Background</span>=<span class="string">"&#123;DynamicResource BorderBrush&#125;"</span> <span class="attr">Height</span>=<span class="string">"36"</span> <span class="attr">CornerRadius</span>=<span class="string">"4"</span>/&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">hc:Col</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">hc:Col</span> <span class="attr">Span</span>=<span class="string">"8"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">Border</span> <span class="attr">Background</span>=<span class="string">"&#123;DynamicResource SecondaryBorderBrush&#125;"</span> <span class="attr">Height</span>=<span class="string">"36"</span> <span class="attr">CornerRadius</span>=<span class="string">"4"</span>/&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">hc:Col</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">hc:Col</span> <span class="attr">Span</span>=<span class="string">"8"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">Border</span> <span class="attr">Background</span>=<span class="string">"&#123;DynamicResource BorderBrush&#125;"</span> <span class="attr">Height</span>=<span class="string">"36"</span> <span class="attr">CornerRadius</span>=<span class="string">"4"</span>/&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">hc:Col</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">hc:Row</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">hc:Row</span> <span class="attr">Margin</span>=<span class="string">"0,20,0,0"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">hc:Col</span> <span class="attr">Span</span>=<span class="string">"6"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">Border</span> <span class="attr">Background</span>=<span class="string">"&#123;DynamicResource BorderBrush&#125;"</span> <span class="attr">Height</span>=<span class="string">"36"</span> <span class="attr">CornerRadius</span>=<span class="string">"4"</span>/&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">hc:Col</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">hc:Col</span> <span class="attr">Span</span>=<span class="string">"6"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">Border</span> <span class="attr">Background</span>=<span class="string">"&#123;DynamicResource SecondaryBorderBrush&#125;"</span> <span class="attr">Height</span>=<span class="string">"36"</span> <span class="attr">CornerRadius</span>=<span class="string">"4"</span>/&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">hc:Col</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">hc:Col</span> <span class="attr">Span</span>=<span class="string">"6"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">Border</span> <span class="attr">Background</span>=<span class="string">"&#123;DynamicResource BorderBrush&#125;"</span> <span class="attr">Height</span>=<span class="string">"36"</span> <span class="attr">CornerRadius</span>=<span class="string">"4"</span>/&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">hc:Col</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">hc:Col</span> <span class="attr">Span</span>=<span class="string">"6"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">Border</span> <span class="attr">Background</span>=<span class="string">"&#123;DynamicResource SecondaryBorderBrush&#125;"</span> <span class="attr">Height</span>=<span class="string">"36"</span> <span class="attr">CornerRadius</span>=<span class="string">"4"</span>/&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">hc:Col</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">hc:Row</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">hc:Row</span> <span class="attr">Margin</span>=<span class="string">"0,20,0,0"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">hc:Col</span> <span class="attr">Span</span>=<span class="string">"4"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">Border</span> <span class="attr">Background</span>=<span class="string">"&#123;DynamicResource BorderBrush&#125;"</span> <span class="attr">Height</span>=<span class="string">"36"</span> <span class="attr">CornerRadius</span>=<span class="string">"4"</span>/&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">hc:Col</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">hc:Col</span> <span class="attr">Span</span>=<span class="string">"4"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">Border</span> <span class="attr">Background</span>=<span class="string">"&#123;DynamicResource SecondaryBorderBrush&#125;"</span> <span class="attr">Height</span>=<span class="string">"36"</span> <span class="attr">CornerRadius</span>=<span class="string">"4"</span>/&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">hc:Col</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">hc:Col</span> <span class="attr">Span</span>=<span class="string">"4"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">Border</span> <span class="attr">Background</span>=<span class="string">"&#123;DynamicResource BorderBrush&#125;"</span> <span class="attr">Height</span>=<span class="string">"36"</span> <span class="attr">CornerRadius</span>=<span class="string">"4"</span>/&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">hc:Col</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">hc:Col</span> <span class="attr">Span</span>=<span class="string">"4"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">Border</span> <span class="attr">Background</span>=<span class="string">"&#123;DynamicResource SecondaryBorderBrush&#125;"</span> <span class="attr">Height</span>=<span class="string">"36"</span> <span class="attr">CornerRadius</span>=<span class="string">"4"</span>/&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">hc:Col</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">hc:Col</span> <span class="attr">Span</span>=<span class="string">"4"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">Border</span> <span class="attr">Background</span>=<span class="string">"&#123;DynamicResource BorderBrush&#125;"</span> <span class="attr">Height</span>=<span class="string">"36"</span> <span class="attr">CornerRadius</span>=<span class="string">"4"</span>/&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">hc:Col</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">hc:Col</span> <span class="attr">Span</span>=<span class="string">"4"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">Border</span> <span class="attr">Background</span>=<span class="string">"&#123;DynamicResource SecondaryBorderBrush&#125;"</span> <span class="attr">Height</span>=<span class="string">"36"</span> <span class="attr">CornerRadius</span>=<span class="string">"4"</span>/&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">hc:Col</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">hc:Row</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">TextBlock</span> <span class="attr">Text</span>=<span class="string">"&#123;ex:Lang Key=&#123;x:Static langs:LangKeys.ColumnSpacing&#125;&#125;"</span> <span class="attr">Margin</span>=<span class="string">"0,32,0,0"</span> <span class="attr">Style</span>=<span class="string">"&#123;StaticResource TextBlockLargeBold&#125;"</span> <span class="attr">HorizontalAlignment</span>=<span class="string">"Left"</span>/&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">hc:Row</span> <span class="attr">Margin</span>=<span class="string">"0,20,0,0"</span> <span class="attr">Gutter</span>=<span class="string">"20"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">hc:Col</span> <span class="attr">Span</span>=<span class="string">"6"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">Border</span> <span class="attr">Background</span>=<span class="string">"&#123;DynamicResource BorderBrush&#125;"</span> <span class="attr">Height</span>=<span class="string">"36"</span> <span class="attr">CornerRadius</span>=<span class="string">"4"</span>/&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">hc:Col</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">hc:Col</span> <span class="attr">Span</span>=<span class="string">"6"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">Border</span> <span class="attr">Background</span>=<span class="string">"&#123;DynamicResource BorderBrush&#125;"</span> <span class="attr">Height</span>=<span class="string">"36"</span> <span class="attr">CornerRadius</span>=<span class="string">"4"</span>/&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">hc:Col</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">hc:Col</span> <span class="attr">Span</span>=<span class="string">"6"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">Border</span> <span class="attr">Background</span>=<span class="string">"&#123;DynamicResource BorderBrush&#125;"</span> <span class="attr">Height</span>=<span class="string">"36"</span> <span class="attr">CornerRadius</span>=<span class="string">"4"</span>/&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">hc:Col</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">hc:Col</span> <span class="attr">Span</span>=<span class="string">"6"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">Border</span> <span class="attr">Background</span>=<span class="string">"&#123;DynamicResource BorderBrush&#125;"</span> <span class="attr">Height</span>=<span class="string">"36"</span> <span class="attr">CornerRadius</span>=<span class="string">"4"</span>/&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">hc:Col</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">hc:Row</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">TextBlock</span> <span class="attr">Text</span>=<span class="string">"&#123;ex:Lang Key=&#123;x:Static langs:LangKeys.HybridLayout&#125;&#125;"</span> <span class="attr">Margin</span>=<span class="string">"0,32,0,0"</span> <span class="attr">Style</span>=<span class="string">"&#123;StaticResource TextBlockLargeBold&#125;"</span> <span class="attr">HorizontalAlignment</span>=<span class="string">"Left"</span>/&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">hc:Row</span> <span class="attr">Margin</span>=<span class="string">"0,20,0,0"</span> <span class="attr">Gutter</span>=<span class="string">"20"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">hc:Col</span> <span class="attr">Span</span>=<span class="string">"16"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">Border</span> <span class="attr">Background</span>=<span class="string">"&#123;DynamicResource BorderBrush&#125;"</span> <span class="attr">Height</span>=<span class="string">"36"</span> <span class="attr">CornerRadius</span>=<span class="string">"4"</span>/&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">hc:Col</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">hc:Col</span> <span class="attr">Span</span>=<span class="string">"8"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">Border</span> <span class="attr">Background</span>=<span class="string">"&#123;DynamicResource BorderBrush&#125;"</span> <span class="attr">Height</span>=<span class="string">"36"</span> <span class="attr">CornerRadius</span>=<span class="string">"4"</span>/&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">hc:Col</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">hc:Row</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">hc:Row</span> <span class="attr">Margin</span>=<span class="string">"0,20,0,0"</span> <span class="attr">Gutter</span>=<span class="string">"20"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">hc:Col</span> <span class="attr">Span</span>=<span class="string">"8"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">Border</span> <span class="attr">Background</span>=<span class="string">"&#123;DynamicResource BorderBrush&#125;"</span> <span class="attr">Height</span>=<span class="string">"36"</span> <span class="attr">CornerRadius</span>=<span class="string">"4"</span>/&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">hc:Col</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">hc:Col</span> <span class="attr">Span</span>=<span class="string">"8"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">Border</span> <span class="attr">Background</span>=<span class="string">"&#123;DynamicResource BorderBrush&#125;"</span> <span class="attr">Height</span>=<span class="string">"36"</span> <span class="attr">CornerRadius</span>=<span class="string">"4"</span>/&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">hc:Col</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">hc:Col</span> <span class="attr">Span</span>=<span class="string">"4"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">Border</span> <span class="attr">Background</span>=<span class="string">"&#123;DynamicResource BorderBrush&#125;"</span> <span class="attr">Height</span>=<span class="string">"36"</span> <span class="attr">CornerRadius</span>=<span class="string">"4"</span>/&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">hc:Col</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">hc:Col</span> <span class="attr">Span</span>=<span class="string">"4"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">Border</span> <span class="attr">Background</span>=<span class="string">"&#123;DynamicResource BorderBrush&#125;"</span> <span class="attr">Height</span>=<span class="string">"36"</span> <span class="attr">CornerRadius</span>=<span class="string">"4"</span>/&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">hc:Col</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">hc:Row</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">hc:Row</span> <span class="attr">Margin</span>=<span class="string">"0,20,0,0"</span> <span class="attr">Gutter</span>=<span class="string">"20"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">hc:Col</span> <span class="attr">Span</span>=<span class="string">"4"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">Border</span> <span class="attr">Background</span>=<span class="string">"&#123;DynamicResource BorderBrush&#125;"</span> <span class="attr">Height</span>=<span class="string">"36"</span> <span class="attr">CornerRadius</span>=<span class="string">"4"</span>/&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">hc:Col</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">hc:Col</span> <span class="attr">Span</span>=<span class="string">"16"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">Border</span> <span class="attr">Background</span>=<span class="string">"&#123;DynamicResource BorderBrush&#125;"</span> <span class="attr">Height</span>=<span class="string">"36"</span> <span class="attr">CornerRadius</span>=<span class="string">"4"</span>/&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">hc:Col</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">hc:Col</span> <span class="attr">Span</span>=<span class="string">"4"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">Border</span> <span class="attr">Background</span>=<span class="string">"&#123;DynamicResource BorderBrush&#125;"</span> <span class="attr">Height</span>=<span class="string">"36"</span> <span class="attr">CornerRadius</span>=<span class="string">"4"</span>/&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">hc:Col</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">hc:Row</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">TextBlock</span> <span class="attr">Text</span>=<span class="string">"&#123;ex:Lang Key=&#123;x:Static langs:LangKeys.ColumnOffset&#125;&#125;"</span> <span class="attr">Margin</span>=<span class="string">"0,32,0,0"</span> <span class="attr">Style</span>=<span class="string">"&#123;StaticResource TextBlockLargeBold&#125;"</span> <span class="attr">HorizontalAlignment</span>=<span class="string">"Left"</span>/&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">hc:Row</span> <span class="attr">Margin</span>=<span class="string">"0,20,0,0"</span> <span class="attr">Gutter</span>=<span class="string">"20"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">hc:Col</span> <span class="attr">Span</span>=<span class="string">"6"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">Border</span> <span class="attr">Background</span>=<span class="string">"&#123;DynamicResource BorderBrush&#125;"</span> <span class="attr">Height</span>=<span class="string">"36"</span> <span class="attr">CornerRadius</span>=<span class="string">"4"</span>/&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">hc:Col</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">hc:Col</span> <span class="attr">Span</span>=<span class="string">"6"</span> <span class="attr">Offset</span>=<span class="string">"6"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">Border</span> <span class="attr">Background</span>=<span class="string">"&#123;DynamicResource BorderBrush&#125;"</span> <span class="attr">Height</span>=<span class="string">"36"</span> <span class="attr">CornerRadius</span>=<span class="string">"4"</span>/&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">hc:Col</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">hc:Row</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">hc:Row</span> <span class="attr">Margin</span>=<span class="string">"0,20,0,0"</span> <span class="attr">Gutter</span>=<span class="string">"20"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">hc:Col</span> <span class="attr">Span</span>=<span class="string">"6"</span> <span class="attr">Offset</span>=<span class="string">"6"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">Border</span> <span class="attr">Background</span>=<span class="string">"&#123;DynamicResource BorderBrush&#125;"</span> <span class="attr">Height</span>=<span class="string">"36"</span> <span class="attr">CornerRadius</span>=<span class="string">"4"</span>/&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">hc:Col</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">hc:Col</span> <span class="attr">Span</span>=<span class="string">"6"</span> <span class="attr">Offset</span>=<span class="string">"6"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">Border</span> <span class="attr">Background</span>=<span class="string">"&#123;DynamicResource BorderBrush&#125;"</span> <span class="attr">Height</span>=<span class="string">"36"</span> <span class="attr">CornerRadius</span>=<span class="string">"4"</span>/&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">hc:Col</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">hc:Row</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">hc:Row</span> <span class="attr">Margin</span>=<span class="string">"0,20,0,0"</span> <span class="attr">Gutter</span>=<span class="string">"20"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">hc:Col</span> <span class="attr">Span</span>=<span class="string">"12"</span> <span class="attr">Offset</span>=<span class="string">"6"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">Border</span> <span class="attr">Background</span>=<span class="string">"&#123;DynamicResource BorderBrush&#125;"</span> <span class="attr">Height</span>=<span class="string">"36"</span> <span class="attr">CornerRadius</span>=<span class="string">"4"</span>/&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">hc:Col</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">hc:Row</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">TextBlock</span> <span class="attr">Text</span>=<span class="string">"&#123;ex:Lang Key=&#123;x:Static langs:LangKeys.ResponsiveLayout&#125;&#125;"</span> <span class="attr">Margin</span>=<span class="string">"0,32,0,0"</span> <span class="attr">Style</span>=<span class="string">"&#123;StaticResource TextBlockLargeBold&#125;"</span> <span class="attr">HorizontalAlignment</span>=<span class="string">"Left"</span>/&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">hc:Row</span> <span class="attr">Margin</span>=<span class="string">"0,20,0,0"</span> <span class="attr">Gutter</span>=<span class="string">"10"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">hc:Col</span> <span class="attr">Layout</span>=<span class="string">"8,6,4,3,1"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">Border</span> <span class="attr">Background</span>=<span class="string">"&#123;DynamicResource BorderBrush&#125;"</span> <span class="attr">Height</span>=<span class="string">"36"</span> <span class="attr">CornerRadius</span>=<span class="string">"4"</span>/&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">hc:Col</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">hc:Col</span> <span class="attr">Layout</span>=<span class="string">"4 6 8 9 11"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">Border</span> <span class="attr">Background</span>=<span class="string">"&#123;DynamicResource SecondaryBorderBrush&#125;"</span> <span class="attr">Height</span>=<span class="string">"36"</span> <span class="attr">CornerRadius</span>=<span class="string">"4"</span>/&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">hc:Col</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">hc:Col</span> <span class="attr">Layout</span>=<span class="string">"&#123;extension:ColLayout Xs=4, Sm=6, Md=8, Lg=9, Xl=11&#125;"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">Border</span> <span class="attr">Background</span>=<span class="string">"&#123;DynamicResource BorderBrush&#125;"</span> <span class="attr">Height</span>=<span class="string">"36"</span> <span class="attr">CornerRadius</span>=<span class="string">"4"</span>/&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">hc:Col</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">hc:Col</span> <span class="attr">Layout</span>=<span class="string">"&#123;extension:ColLayout Xs=8, Sm=6, Md=4, Lg=3, Xl=1&#125;"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">Border</span> <span class="attr">Background</span>=<span class="string">"&#123;DynamicResource SecondaryBorderBrush&#125;"</span> <span class="attr">Height</span>=<span class="string">"36"</span> <span class="attr">CornerRadius</span>=<span class="string">"4"</span>/&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">hc:Col</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">hc:Row</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">StackPanel</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><img src="https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/Grid.gif" alt="Grid"></p>
<div class="note info">
            <p>xaml中 <code>Layout</code> 写法的3种方式：<br>Layout=”{extension:ColLayout Xs=4, Sm=6, Md=8, Lg=9, Xl=11}”<br>Layout=”4,6,8,9,11”<br>Layout=”4 6 8 9 11”</p>
          </div>
        
      </div>
      
      
      
    </div>
    


  
  
  <ul class="breadcrumb">
    
      
      
        
          
            
          
          
            <li><a href="/handycontrol/">HANDYCONTROL</a></li>
          
        
      
    
      
      
        
          
            
          
          
            <li><a href="/handycontrol/extend_controls/">EXTEND_CONTROLS</a></li>
          
        
      
    
      
      
        
          <li>GRID</li>
        
      
    
      
      
    
  </ul>


    
    
    
  </div>


          </div>
          

  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <img class="site-author-image" itemprop="image" src="https://avatars2.githubusercontent.com/u/17383395?s=460&v=4" alt="HandyOrg">
            
              <p class="site-author-name" itemprop="name">HandyOrg</p>
              <div class="site-description motion-element" itemprop="description">everything can be handy</div>
          </div>

          

          

          

          
            <div class="links-of-author motion-element">
              
                <span class="links-of-author-item">
                  
                  
                    
                  
                  
                    
                  
                  <a href="https://github.com/HandyOrg" title="GitHub &rarr; https://github.com/HandyOrg" rel="noopener" target="_blank"><i class="fa fa-fw fa-github"></i>GitHub</a>
                </span>
              
                <span class="links-of-author-item">
                  
                  
                    
                  
                  
                    
                  
                  <a href="mailto:handycontrol@qq.com" title="E-Mail &rarr; mailto:handycontrol@qq.com" rel="noopener" target="_blank"><i class="fa fa-fw fa-envelope"></i>E-Mail</a>
                </span>
              
                <span class="links-of-author-item">
                  
                  
                    
                  
                  
                    
                  
                  <a href="//shang.qq.com/wpa/qunwpa?idkey=a571e5553c9d41e49c4f22f3a8b2865451497a795ff281fedf3285def247efc1" title="QQ群1 &rarr; //shang.qq.com/wpa/qunwpa?idkey=a571e5553c9d41e49c4f22f3a8b2865451497a795ff281fedf3285def247efc1"><i class="fa fa-fw fa-qq"></i>QQ群1</a>
                </span>
              
                <span class="links-of-author-item">
                  
                  
                    
                  
                  
                    
                  
                  <a href="//shang.qq.com/wpa/qunwpa?idkey=5c18622a0f6ee07a6f33afa8cdb85b1f72ea50e878271dfcec919c76b55afee7" title="QQ群2 &rarr; //shang.qq.com/wpa/qunwpa?idkey=5c18622a0f6ee07a6f33afa8cdb85b1f72ea50e878271dfcec919c76b55afee7"><i class="fa fa-fw fa-qq"></i>QQ群2</a>
                </span>
              
                <span class="links-of-author-item">
                  
                  
                    
                  
                  
                    
                  
                  <a href="https://www.nuget.org/packages/HandyControl" title="Nuget &rarr; https://www.nuget.org/packages/HandyControl" rel="noopener" target="_blank"><i class="fa fa-fw fa-code"></i>Nuget</a>
                </span>
              
                <span class="links-of-author-item">
                  
                  
                    
                  
                  
                    
                  
                  <a href="https://gitter.im/HandyControl/Lobby" title="Gitter &rarr; https://gitter.im/HandyControl/Lobby" rel="noopener" target="_blank"><i class="fa fa-fw fa-commenting"></i>Gitter</a>
                </span>
              
                <span class="links-of-author-item">
                  
                  
                    
                  
                  
                    
                  
                  <a href="https://github.com/ghost1372/HandyControl/wiki" title="Wiki-en &rarr; https://github.com/ghost1372/HandyControl/wiki" rel="noopener" target="_blank"><i class="fa fa-fw fa-book"></i>Wiki-en</a>
                </span>
              
                <span class="links-of-author-item">
                  
                  
                    
                  
                  
                    
                  
                  <a href="https://github.com/TheKeytrap/HandyControl/wiki" title="Wiki-fr &rarr; https://github.com/TheKeytrap/HandyControl/wiki" rel="noopener" target="_blank"><i class="fa fa-fw fa-book"></i>Wiki-fr</a>
                </span>
              
            </div>
          

          

          
          

          
            
          
          

        </div>
      </div>

      
      <!--noindex-->
        <div class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
            
            
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#属性"><span class="nav-number">1.</span> <span class="nav-text">属性</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#Row-行"><span class="nav-number">1.1.</span> <span class="nav-text">Row 行</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Col-列"><span class="nav-number">1.2.</span> <span class="nav-text">Col 列</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#案例"><span class="nav-number">2.</span> <span class="nav-text">案例</span></a></li></ol></div>
            

          </div>
        </div>
      <!--/noindex-->
      

      
        <div class="back-to-top">
          <i class="fa fa-arrow-up"></i>
          
            <span id="scrollpercent"><span>0</span>%</span>
          
        </div>
      

    </div>
  </aside>
  


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; <span itemprop="copyrightYear">2020</span>
  <span class="with-love" id="animate">
    <i class="fa fa-HandyOrg"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">HandyOrg</span>

  

  
</div>






  <div class="theme-info">主题 – <a href="https://theme-next.org" class="theme-link" rel="noopener" target="_blank">NexT.Gemini</a> v7.1.0</div>




        






  <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? "https://" : "http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1278600916'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s4.cnzz.com/z_stat.php%3Fid%3D1278600916%26online%3D1%26show%3Dline' type='text/javascript'%3E%3C/script%3E"));</script>



        
      </div>
    </footer>

    

    

    

    
  </div>

  

<script>
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>


























  
  <script src="/lib/jquery/index.js?v=2.1.3"></script>

  
  <script src="/lib/velocity/velocity.min.js?v=1.2.1"></script>

  
  <script src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>


  


  <script src="/js/utils.js?v=7.1.0"></script>

  <script src="/js/motion.js?v=7.1.0"></script>



  
  


  <script src="/js/affix.js?v=7.1.0"></script>

  <script src="/js/schemes/pisces.js?v=7.1.0"></script>




  
  <script src="/js/scrollspy.js?v=7.1.0"></script>
<script src="/js/post-details.js?v=7.1.0"></script>



  


  <script src="/js/next-boot.js?v=7.1.0"></script>


  

  

  

  


  


  
  <script>
    // Popup Window;
    var isfetched = false;
    var isXml = true;
    // Search DB path;
    var search_path = "search.xml";
    if (search_path.length === 0) {
      search_path = "search.xml";
    } else if (/json$/i.test(search_path)) {
      isXml = false;
    }
    var path = "/" + search_path;
    // monitor main search box;

    var onPopupClose = function (e) {
      $('.popup').hide();
      $('#local-search-input').val('');
      $('.search-result-list').remove();
      $('#no-result').remove();
      $(".local-search-pop-overlay").remove();
      $('body').css('overflow', '');
    }

    function proceedsearch() {
      $("body")
        .append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
        .css('overflow', 'hidden');
      $('.search-popup-overlay').click(onPopupClose);
      $('.popup').toggle();
      var $localSearchInput = $('#local-search-input');
      $localSearchInput.attr("autocapitalize", "none");
      $localSearchInput.attr("autocorrect", "off");
      $localSearchInput.focus();
    }

    // search function;
    var searchFunc = function(path, search_id, content_id) {
      'use strict';

      // start loading animation
      $("body")
        .append('<div class="search-popup-overlay local-search-pop-overlay">' +
          '<div id="search-loading-icon">' +
          '<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
          '</div>' +
          '</div>')
        .css('overflow', 'hidden');
      $("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');

      

      $.ajax({
        url: path,
        dataType: isXml ? "xml" : "json",
        async: true,
        success: function(res) {
          // get the contents from search data
          isfetched = true;
          $('.popup').detach().appendTo('.header-inner');
          var datas = isXml ? $("entry", res).map(function() {
            return {
              title: $("title", this).text(),
              content: $("content",this).text(),
              url: $("url" , this).text()
            };
          }).get() : res;
          var input = document.getElementById(search_id);
          var resultContent = document.getElementById(content_id);
          var inputEventFunction = function() {
            var searchText = input.value.trim().toLowerCase();
            var keywords = searchText.split(/[\s\-]+/);
            if (keywords.length > 1) {
              keywords.push(searchText);
            }
            var resultItems = [];
            if (searchText.length > 0) {
              // perform local searching
              datas.forEach(function(data) {
                var isMatch = false;
                var hitCount = 0;
                var searchTextCount = 0;
                var title = data.title.trim();
                var titleInLowerCase = title.toLowerCase();
                var content = data.content.trim().replace(/<[^>]+>/g,"");
                
                var contentInLowerCase = content.toLowerCase();
                var articleUrl = decodeURIComponent(data.url).replace(/\/{2,}/g, '/');
                var indexOfTitle = [];
                var indexOfContent = [];
                // only match articles with not empty titles
                if(title != '') {
                  keywords.forEach(function(keyword) {
                    function getIndexByWord(word, text, caseSensitive) {
                      var wordLen = word.length;
                      if (wordLen === 0) {
                        return [];
                      }
                      var startPosition = 0, position = [], index = [];
                      if (!caseSensitive) {
                        text = text.toLowerCase();
                        word = word.toLowerCase();
                      }
                      while ((position = text.indexOf(word, startPosition)) > -1) {
                        index.push({position: position, word: word});
                        startPosition = position + wordLen;
                      }
                      return index;
                    }

                    indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
                    indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
                  });
                  if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
                    isMatch = true;
                    hitCount = indexOfTitle.length + indexOfContent.length;
                  }
                }

                // show search results

                if (isMatch) {
                  // sort index by position of keyword

                  [indexOfTitle, indexOfContent].forEach(function (index) {
                    index.sort(function (itemLeft, itemRight) {
                      if (itemRight.position !== itemLeft.position) {
                        return itemRight.position - itemLeft.position;
                      } else {
                        return itemLeft.word.length - itemRight.word.length;
                      }
                    });
                  });

                  // merge hits into slices

                  function mergeIntoSlice(text, start, end, index) {
                    var item = index[index.length - 1];
                    var position = item.position;
                    var word = item.word;
                    var hits = [];
                    var searchTextCountInSlice = 0;
                    while (position + word.length <= end && index.length != 0) {
                      if (word === searchText) {
                        searchTextCountInSlice++;
                      }
                      hits.push({position: position, length: word.length});
                      var wordEnd = position + word.length;

                      // move to next position of hit

                      index.pop();
                      while (index.length != 0) {
                        item = index[index.length - 1];
                        position = item.position;
                        word = item.word;
                        if (wordEnd > position) {
                          index.pop();
                        } else {
                          break;
                        }
                      }
                    }
                    searchTextCount += searchTextCountInSlice;
                    return {
                      hits: hits,
                      start: start,
                      end: end,
                      searchTextCount: searchTextCountInSlice
                    };
                  }

                  var slicesOfTitle = [];
                  if (indexOfTitle.length != 0) {
                    slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
                  }

                  var slicesOfContent = [];
                  while (indexOfContent.length != 0) {
                    var item = indexOfContent[indexOfContent.length - 1];
                    var position = item.position;
                    var word = item.word;
                    // cut out 100 characters
                    var start = position - 20;
                    var end = position + 80;
                    if(start < 0){
                      start = 0;
                    }
                    if (end < position + word.length) {
                      end = position + word.length;
                    }
                    if(end > content.length){
                      end = content.length;
                    }
                    slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
                  }

                  // sort slices in content by search text's count and hits' count

                  slicesOfContent.sort(function (sliceLeft, sliceRight) {
                    if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
                      return sliceRight.searchTextCount - sliceLeft.searchTextCount;
                    } else if (sliceLeft.hits.length !== sliceRight.hits.length) {
                      return sliceRight.hits.length - sliceLeft.hits.length;
                    } else {
                      return sliceLeft.start - sliceRight.start;
                    }
                  });

                  // select top N slices in content

                  var upperBound = parseInt('-1');
                  if (upperBound >= 0) {
                    slicesOfContent = slicesOfContent.slice(0, upperBound);
                  }

                  // highlight title and content

                  function highlightKeyword(text, slice) {
                    var result = '';
                    var prevEnd = slice.start;
                    slice.hits.forEach(function (hit) {
                      result += text.substring(prevEnd, hit.position);
                      var end = hit.position + hit.length;
                      result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
                      prevEnd = end;
                    });
                    result += text.substring(prevEnd, slice.end);
                    return result;
                  }

                  var resultItem = '';

                  if (slicesOfTitle.length != 0) {
                    resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
                  } else {
                    resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
                  }

                  slicesOfContent.forEach(function (slice) {
                    resultItem += "<a href='" + articleUrl + "'>" +
                      "<p class=\"search-result\">" + highlightKeyword(content, slice) +
                      "...</p>" + "</a>";
                  });

                  resultItem += "</li>";
                  resultItems.push({
                    item: resultItem,
                    searchTextCount: searchTextCount,
                    hitCount: hitCount,
                    id: resultItems.length
                  });
                }
              })
            };
            if (keywords.length === 1 && keywords[0] === "") {
              resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x"></i></div>'
            } else if (resultItems.length === 0) {
              resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x"></i></div>'
            } else {
              resultItems.sort(function (resultLeft, resultRight) {
                if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
                  return resultRight.searchTextCount - resultLeft.searchTextCount;
                } else if (resultLeft.hitCount !== resultRight.hitCount) {
                  return resultRight.hitCount - resultLeft.hitCount;
                } else {
                  return resultRight.id - resultLeft.id;
                }
              });
              var searchResultList = '<ul class=\"search-result-list\">';
              resultItems.forEach(function (result) {
                searchResultList += result.item;
              })
              searchResultList += "</ul>";
              resultContent.innerHTML = searchResultList;
            }
          }

          if ('auto' === 'auto') {
            input.addEventListener('input', inputEventFunction);
          } else {
            $('.search-icon').click(inputEventFunction);
            input.addEventListener('keypress', function (event) {
              if (event.keyCode === 13) {
                inputEventFunction();
              }
            });
          }

          // remove loading animation
          $(".local-search-pop-overlay").remove();
          $('body').css('overflow', '');

          proceedsearch();
        }
      });
    }

    // handle and trigger popup window;
    $('.popup-trigger').click(function(e) {
      e.stopPropagation();
      if (isfetched === false) {
        searchFunc(path, 'local-search-input', 'local-search-result');
      } else {
        proceedsearch();
      };
    });

    $('.popup-btn-close').click(onPopupClose);
    $('.popup').click(function(e){
      e.stopPropagation();
    });
    $(document).on('keyup', function (event) {
      var shouldDismissSearchPopup = event.which === 27 &&
        $('.search-popup').is(':visible');
      if (shouldDismissSearchPopup) {
        onPopupClose();
      }
    });
  </script>





  

  

  

  

  

  

  

  

  

  

  

  

  

  

</body>
</html>
